<template>
<div class="activity-like views-container">
    <share-link :config="shareLinkConfig" ref="sharelink">
        <template slot="title">-福袋</template>
        <template slot="el-form-item">
            <el-form-item label="小程序路径" v-if="shareLinkConfig.params.qrUrl">
                <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
                    <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="公众号链接" v-if="shareLinkConfig.params.linkUrl">
                <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
                    <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="短链接" v-if="shareLinkConfig.params.linkUrl">
                <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
                    <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.shortUrl,$event)">复制</el-button>
                </el-input>
            </el-form-item>

        </template>
    </share-link>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <!-- <router-link tag="span" :to="{path:'/application/addActivity'}">
                    <el-button size="small" type="primary">添加活动</el-button>
                </router-link> -->
            <router-link tag="span" to="/application/addActivityBlessBag">
                <el-button size="small" type="primary">添加活动</el-button>
            </router-link>
        </div>
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.blessingBag.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="活动名称：">
                        <el-input v-model="tableFormatData.blessingBag.files.title" placeholder="请输入活动名称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="活动时间：">
                        <el-date-picker v-model="tableFormatData.blessingBag.files.time" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-tabs v-model="tableFormatData.blessingBag.files.status" type="card" @tab-click="filesSerch">
                <el-tab-pane label="全部活动" name="0"></el-tab-pane>
                <el-tab-pane label="未开始" name="2"></el-tab-pane>
                <el-tab-pane label="进行中" name="1"></el-tab-pane>
                <el-tab-pane label="已结束" name="3"></el-tab-pane>
            </el-tabs>
            <el-table :data="tableFormatData.blessingBag.tableData" style="width: 100%">
                <el-table-column prop="date" label="活动标题" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="活动时间" min-width="100">
                    <template slot-scope="scope">
                        <p style="white-space: nowrap;">开始时间:{{scope.row.start_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                        <p style="white-space: nowrap;">结束时间:{{scope.row.end_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="活动状态" min-width="60">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==1">进行中</span>
                        <span v-if="scope.row.status==2">未开始</span>
                        <span v-if="scope.row.status==3">已结束</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="参与人数" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.enjoy_user || 0}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="真实中奖人数" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.no_enjoy_user || 0}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="用户群体" min-width="60">
                    <template slot-scope="scope">
                        <span v-if="scope.row.user_group==1">所有用户</span>
                        <span v-if="scope.row.user_group==2">会员用户</span>
                        <span v-if="scope.row.user_group==3">分销用户</span>
                        <span v-if="scope.row.user_group==4">新用户</span>
                        <span v-if="scope.row.user_group==5">限定地区用户{{scope.row.address}}</span>
                        <span v-if="scope.row.user_group==6">标签用户</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="客服/社群" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.community_name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="操作" min-width="100">
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <router-link class="wlm-text" tag="span" :to="{path:'/application/bagSetting', query:{blessing_id:scope.row.blessing_id}}">
                                <el-button type="text">福袋</el-button>
                            </router-link>
                            <div class="btn-line"></div>
                            <router-link class="wlm-text" tag="span" :to="{path:'/application/lookUserBag',query :{ blessing_id:scope.row.blessing_id}}">
                                <el-button type="text">查看用户</el-button>
                            </router-link>
                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="sharelink(scope.row.blessing_id)">推广</el-button>
                            <div class="btn-line"></div>
                            <router-link class="wlm-text" tag="span" :to="{path:'/application/addActivityBlessBag', query:{blessing_id:scope.row.blessing_id}}">
                                <el-button type="text">编辑</el-button>
                            </router-link>
                            <!-- <el-button class="wlm-text" type="text">编辑</el-button> -->

                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.blessing_id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 20, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="totalList">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    blessingLists,
    blessingDel,
    blessingSpread
} from '@/api/application'
import clipboard from '@/utils/clipboard'
import ShareLink from '@/components/ShareLink/index'
import mixins from '@/mixins/mixins'
export default {
    name: 'blessingBag',
    mixins: [mixins.getters('Table')],
    components: {
        ShareLink
    },
    created() {},
    data() {
        return {
            shareLinkConfig: {
                current: 'weChatQr',
                params: {
                    qrUrl: '',
                    linkUrl: '',
                    weChatQr: '',
                    appQr: '',
                    shortUrl: ''
                }
            },
            totalList: 0,
            currentPage4: 1,
            tableData: [],
            tableFormatData: {
                current: 'blessingBag',
                blessingBag: {
                    key: 'blessingBag',
                    api: {
                        getList:blessingLists,
                         delList: blessingDel
                    },
                    tableData: [],
                    files: {
                        
                        ids: [],
                        checkall: '0',
                        Recycle: '1'
                    },
                      pagination: {
                        page: 1,
                        list_rows: 10,
                        pagesizes: [10, 20, 50],
                        total: 0
                    }
                }
            },
            form: {
                status: '',
                title: '',
                time: '',
                checkall: 0,
                Recycle: 1,
                page: 1,
                list_rows: 10
            }
        }
    },
    mounted() {
        // this.$nextTick(() => {
        //     setTimeout(() => {
        //         this.getList()
        //     }, 500)

        // })
    },
    methods: {
        //筛选
        // filesSerch() {
        //     this.getList()
        // },
        delTableItem(id) {
            blessingDel({
                blessing_id: id
            }).then((res) => {
                if (res.data.code == 1) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    })
                    this.getList()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                }
            })
        },
        //获取列表
        // getList() {
        //     blessingLists(this.form).then((res) => {
        //         this.tableData = res.data.data.data
        //         this.totalList = res.data.data.total;
        //     })
        // },
        handleSizeChange(val) {
            this.form.page = 1;
            this.form.list_rows = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.form.page = val;
            this.getList();
        },
        filesEmpty() {
            this.form = {}
            this.getList()
        },
        //   推广
        sharelink(blessing_id) {
            blessingSpread({
                blessing_id
            }).then((response) => {
                const {
                    data: {
                        data: {
                            weChat_qrcode,
                            wxApp_qrcode,
                            weChat_url,
                            wxApp_url,
                            url,
                            weChat_short_url
                        }
                    }
                } = response
                this.shareLinkConfig.params.qrUrl = wxApp_url
                this.shareLinkConfig.params.linkUrl = weChat_url
                this.shareLinkConfig.params.weChatQr = weChat_qrcode
                this.shareLinkConfig.params.appQr = wxApp_qrcode
                this.shareLinkConfig.params.url = url
                this.shareLinkConfig.params.shortUrl = weChat_short_url
                this.shareLinkConfig.current = weChat_qrcode ? 'weChatQr' : weChat_qrcode ? 'appQr' : ''
            })
            this.$refs.sharelink.toggle()
        },
        handleClipboard(text, event) {
            clipboard(text, event)
        },
        // 删除

    },

}
</script>

<style lang="scss" scoped>
</style>
